<!DOCTYPE html>
<html>
<head>
    <title>Ectivise Cloud</title>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="shortcut icon" type="image/png" href="http://www.ectivise.com/images/colors/green/logo.png"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">-->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <!--<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script type="application/x-javascript">
        function hideResult() {
            $('#ea5800x7_4p').hide();
            $('#ea5800x7_8p').hide();
            $('#ea5800x2_4p').hide();
            $('#ea5800x2_8p').hide();
            $('#ea5801_4p').hide();
            $('#ea5801_8p').hide();
            $('#ont_8p').hide();
            $('#ont_4p').hide();
            // $('#ea5800x7').show();
        } </script>
    <style>
        .responsive {
            width: 100%;
            max-width: 400px;
            height: auto;
        }

        .inputcell {
            width: 200px;
            height: 15px;
            background: #f5f5f5;
            border: 1px solid rgb(221, 221, 221);
            padding: 5px;
            color: blue
        }

        .inputcell[placeholder]:empty:before {
            content: attr(placeholder);
            color: rgb(194, 184, 184);
        }
    </style>
    <style>
        .the-legend {
            border-style: none;
            border-width: 0;
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 0;
            width: auto;
            padding: 0 10px;
        }

        .the-fieldset {
            border: 5px solid #e0e0e0;
            padding: 10px;
        }
    </style>

    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        /* Full-width input fields */
        input[type=text], input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        /* Set a style for all buttons */
        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }

        button:hover {
            opacity: 0.8;
        }

        /* Extra styles for the cancel button */
        .cancelbtn {
            width: auto;
            padding: 10px 18px;
            background-color: #f44336;
        }

        /* Center the image and position the close button */
        .imgcontainer {
            text-align: center;
            margin: 24px 0 12px 0;
            position: relative;
        }

        img.avatar {
            width: 40%;
            border-radius: 50%;
        }

        .container {
            padding: 16px;
        }

        span.psw {
            float: right;
            padding-top: 16px;
        }

        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0, 0, 0); /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
            padding-top: 60px;
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }

        /* The Close Button (x) */
        .close {
            position: absolute;
            right: 25px;
            top: 0;
            color: #000;
            font-size: 35px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: red;
            cursor: pointer;
        }

        /* Add Zoom Animation */
        .animate {
            -webkit-animation: animatezoom 0.6s;
            animation: animatezoom 0.6s
        }

        @-webkit-keyframes animatezoom {
            from {
                -webkit-transform: scale(0)
            }
            to {
                -webkit-transform: scale(1)
            }
        }

        @keyframes animatezoom {
            from {
                transform: scale(0)
            }
            to {
                transform: scale(1)
            }
        }

        /* Change styles for span and cancel button on extra small screens */
        @media screen and (max-width: 300px) {
            span.psw {
                display: block;
                float: none;
            }

            .cancelbtn {
                width: 100%;
            }
        }
    </style>

    <script>
        function fun_gponcal() {
            // debugger;
            hideResult();
            //TODO: move the get price function to the server so not expose to the client side
            var unitPrice4p = parseFloat('787.00');
            var unitPrice8p = parseFloat('1634.00');
            var oltPrice8p = parseFloat('201566.80');
            var oltPrice16p = parseFloat('671732.00');
            var oltPrice16p_1 = parseFloat('880072.00');
            //
            var endpoints_1 = $("#_endpoints").val().trim();
            if (endpoints_1 == '') {
                // debugger;
                alert('Please input the number of endpoints');
                return false;
            }
            if(isNaN(endpoints_1)){
                alert(endpoints_1 + " is not a number");
                return false;
                // document.write(endpoints_1 + " is not a number <br/>");
            }

            var ont4pChecked = document.getElementById("s_fac").checked
            var ont8pChecked = document.getElementById("s_fac1").checked
            var endpoints = endpoints_1 == '' ? 0 : parseInt(endpoints_1, 10);
            var ont4port = Math.ceil(endpoints / 3);
            var ont8port = Math.ceil(endpoints / 7);
            debugger;
            var ea5801G084psub = ont4port * unitPrice4p;
            var ea5801G088psub = ont8port * unitPrice8p;
            // debugger
            document.getElementById("nosont4").innerHTML = ont4port.toString();
            document.getElementById("nosont8").innerHTML = ont8port.toString();

            function showPackageABC() {
                if (!ont4pChecked && !ont8pChecked) {
                    alert('Choose the ONT type, 4 or 8 ports')
                } else if (ont4pChecked && !ont8pChecked) {
                    //show package A/B/C 4 port result
                    hideResult();
                    $('#ea5800x7_4p').show();
                    $('#ea5800x2_4p').show();
                    $('#ea5801_4p').show();
                    $('#ont_4p').show();
                    document.getElementById("ea5801G084pkg").innerHTML = (ea5801G084psub + oltPrice8p).toString();
                    document.getElementById("ea5800x2_4pkg").innerHTML = (ea5801G084psub + oltPrice16p).toString();
                    document.getElementById("ea5800x7_4pkg").innerHTML = (unitPrice4p * ont4port + oltPrice16p_1).toString();
                } else if (!ont4pChecked && ont8pChecked) {
                    //show package A/B/C 8 port result
                    $('#ea5800x7_8p').show();
                    $('#ea5800x2_8p').show();
                    $('#ea5801_8p').show();
                    $('#ont_8p').show();
                    document.getElementById("ea5801G088pkg").innerHTML = (ea5801G088psub + oltPrice16p).toString();
                    document.getElementById("ea5800x2_8pkg").innerHTML = (ea5801G088psub + oltPrice16p).toString();
                    document.getElementById("ea5800x7_8pkg").innerHTML = (unitPrice8p * ont8port + oltPrice16p_1).toString();
                } else {
                    //both 4port and 8port chosen, logic not defined yet
                }
            }

            function showPackageBC() {
                if (!ont4pChecked && !ont8pChecked) {
                    alert('Choose the ONT type, 4 or 8 ports')
                } else if (ont4pChecked && !ont8pChecked) {
                    //show package B/C 4 port result
                    $('#ea5800x7_4p').show();
                    $('#ea5800x2_4p').show();
                    $('#ont_4p').show();
                    document.getElementById("ea5800x2_4pkg").innerHTML = (ea5801G084psub + oltPrice16p).toString();
                    document.getElementById("ea5800x7_4pkg").innerHTML = (unitPrice4p * ont4port + oltPrice16p_1).toString();
                } else if (!ont4pChecked && ont8pChecked) {
                    //show package B/C 8 port result
                    $('#ea5800x7_8p').show();
                    $('#ea5800x2_8p').show();
                    $('#ont_8p').show();
                    document.getElementById("ea5800x2_8pkg").innerHTML = (ea5801G088psub + oltPrice16p).toString();
                    document.getElementById("ea5800x7_8pkg").innerHTML = (unitPrice8p * ont8port + oltPrice16p_1).toString();
                } else {
                    //both 4port and 8port chosen, logic not defined yet
                }
            }

            function showPackageC() {
                if (!ont4pChecked && !ont8pChecked) {
                    alert('Choose the ONT type, 4 or 8 ports')
                } else if (ont4pChecked && !ont8pChecked) {
                    //show package C 4 port result
                    $('#ea5800x7_4p').show();
                    $('#ont_4p').show();
                    document.getElementById("ea5800x7_4pkg").innerHTML = (unitPrice4p * ont4port + oltPrice16p_1).toString();
                } else if (!ont4pChecked && ont8pChecked) {
                    //show package C 8 port result
                    $('#ea5800x7_8p').show();
                    $('#ont_8p').show();
                    document.getElementById("ea5800x7_8pkg").innerHTML = (unitPrice8p * ont8port + oltPrice16p_1).toString();
                } else {
                    //both 4port and 8port chosen, logic not defined yet
                }
            }

            if (endpoints > 0 && endpoints <= 100) {
                showPackageABC();
            } else if (endpoints > 100 && endpoints <= 500) {
                showPackageBC();
            } else if (endpoints > 500 && endpoints <= 1000) {
                showPackageC();
            } else {//not defined yet
                showPackageC();
            }

            // document.getElementById("ea5801G084psub").innerHTML = ea5801G084psub.toString();
            // document.getElementById("ea5801G088psub").innerHTML = ea5801G088psub.toString();
            /*
            document.getElementById("ea5801G084pkg").innerHTML = (ea5801G084psub + oltPrice8p).toString();
            document.getElementById("ea5801G088pkg").innerHTML = (ea5801G088psub + oltPrice16p).toString();

            document.getElementById("ea5800x2_4pkg").innerHTML = (ea5801G084psub + oltPrice16p).toString();
            document.getElementById("ea5800x2_8pkg").innerHTML = (ea5801G088psub + oltPrice16p).toString();

            var ea5800x, ea5800x1;
            document.getElementById("ea5800x7_4pkg").innerHTML = (unitPrice4p * ont4port + oltPrice16p_1).toString();
            document.getElementById("ea5800x7_8pkg").innerHTML = (unitPrice8p * ont8port + oltPrice16p_1).toString();
            */
            // debugger;
            //console.log(document.getElementById('endpoints').value);
        }
    </script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <script>
        $(function () {
            $("#datepicker").datepicker();
            $("#anim").change(function () {
                $("#datepicker").datepicker("option", "showAnim", $(this).val());
            });
        });
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"
            integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
</head>
<body>
<!--Test code-->
<!--<h2>Modal Login Form</h2>-->
<!--<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>-->

<script>
    $(document).ready(function () {
        //console.log("ready!");
        $("#bt_logout").click(function () {
            // debugger
            var settings = {
                "async": true,
                "crossDomain": true,
                "url": "/logout",
                "method": "POST",
                "headers": {
                    "Content-Type": "application/x-www-form-urlencoded",
                    "cache-control": "yes",
                },
                "data": {
                    // "email": $("#i_email").val(),
                    // "password": $("#i_pwd").val(),
                    "token": "",
                }
            }

            debugger
            $.ajax(settings).done(function (response) {
                console.log(response);
                if (response == 'ok')
                    window.location.replace("http://localhost:8081/");
                //window.location.href('http://www.ectivisecloud.com');
                //alert(response)
            });
        });
    });
</script>
<!--<img   alt="Ectivise logo" src="http://qms.ectivisecloud.com/images/ectiviselogo.png" width="80px">-->
<!-- Header -->
<header id="js-header" class="u-header u-header--sticky-top u-header--toggle-section u-header--change-appearance"
        data-header-fix-moment="200"
        data-header-fix-effect="slide">
    <div class="text-center text-lg-left u-header__section u-header__section--hidden u-header__section--light g-bg-white g-brd-bottom g-brd-gray-light-v4 g-py-20">
        <div class="container">
            <div class="row flex-lg-row align-items-center justify-content-lg-start">
                <div class="col-6 col-sm-3 col-lg-2">
                    <!-- Logo -->
                    <a href="#!" class="js-go-to navbar-brand"
                       data-type="static">
                        <img class="img-fluid g-width-150" src="http://www.ectivisecloud.com/logo.png"
                             alt="Ectivise Logo" width="100px">
                    </a>
                    <!-- End Logo -->
                </div>

                <div class="col-6 col-sm-9 col-lg-10">
                    <div class="row">
                        <div class="col-sm g-brd-right--sm g-brd-gray-light-v4">
                            <div class="g-pa-10--lg">
                                <span class="icon icon-screen-smartphone g-valign-middle g-font-size-5 g-color-primary g-mr-5"></span>
                                <span class="text-uppercase g-font-size-5"><small>Ectivise Cloud Service</small></span>
                                <!--<strong class="d-block g-pl-25">+65 9155 5044</strong>-->
                            </div>
                        </div>
                    </div>
                </div>
                <!--<button onclick="postMyFormData()" style="width:auto;">Logout</button>-->
                <!--<script>-->
                <!--function myFunction() {-->
                <!--alert("I am an alert box!");-->
                <!--}-->
                <!--</script>-->

            </div>
        </div>
    </div>
</header>
<!-- End Header -->
<div class="jumbotron text-center">
    <div class="raw">
        <h5>Huawei GPON Solution Package</h5>
        <small>Type of redundancy: Dual-Homing xPON Type B</small>
    </div>
    <img src="http://qms.ectivisecloud.com/images/d.png" alt="GPON Diagram" class="responsive" width="350">
    <br><h4 class="bg-default">Category Explantation</h4>
    <small>Each package include Hardware, Professional Service and Maintenance</small>
    <table class="table">
        <thead>
        <tr>
            <th>Package Type</th>
            <th>Description</th>
            <th>NO. endpoints</th>
        </tr>
        </thead>
        <tbody>
        <tr class="table-success">
            <td><p>Package A</p><br></td>
            <td>
                <small>Small Setup (Model EA5801-GP08)</small>
                <br>
                <small>8 PON Ports</small>
                <br>
                <small>8 (2x16 Splitter)</small>
            </td>
            <td>1 ~ 100</td>
        </tr>
        <tr class="table-active">
            <td><p>Package B</p><br></td>
            <td>
                <small>Small Setup (Model EA5800-X2)</small>
                <br>
                <small>16 PON Ports</small>
                <br>
                <small>16 (2x16 Splitter)</small>
            </td>
            <td>101 ~ 500</td>
        </tr>
        <tr class="table-info">
            <td><p>Package C</p><br></td>
            <td>
                <small>Large Setup (Model EA5800-X7)</small>
                <br>
                <small>32 PON Ports</small>
                <br>
                <small>32 (2x16 Splitter)</small>
            </td>
            <td>501 ~ 1000</td>
        </tr>
        </tbody>
    </table>

</div>
<div class="container">

    <fieldset class="the-fieldset boarder p-lg-5">
        <legend class="the-legend w-auto">
            <a style="font: large">Customer Info</a>
        </legend>
        <!--<div class="row">-->
        <div class="col-md-4 col-md-offset-4">
            <div class="panel-body">
                <!--<fieldset>-->
                <div class="form-group has-success">
                    Customer:<input class="form-control input-lg" placeholder="Customer name" id="cust"
                                    type="text">
                </div>
                <div class="form-group has-success">
                    Date of Engagement:<input type="text" id="datepicker" class="form-control input-lg">
                    <!--placeholder="Date of engagement" -->
                    <!--&gt;-->
                </div>
                <div class="form-group has-success">
                    Industry Sector:<input class="form-control input-lg" placeholder="Industry sector"
                                           id="industry" value=""
                                           type="text" required="true">
                </div>
                <!--<div class="form-group has-success">-->
                <!--Number of end points estimated:<input class="form-control input-lg"-->
                <!--placeholder="Number of end points"-->
                <!--id="_endpoints_org" value=""-->
                <!--type="text" required="true">-->
                <!--</div>-->
            </div>
        </div>
    </fieldset>
    <br>
    <fieldset class="the-fieldset boarder p-lg-5">
        <legend class="the-legend w-auto">
            <a style="font: large">ONTs & endpoints</a>
        </legend>
        <!--<div class="row">-->
        <div class="col-md-4 col-md-offset-4">
            <div class="panel-body">
                <!--<fieldset>-->
                <div>Choose ONT type</div>
                <label for="_ont4port" class="checkbox-inline">
                    <input id="s_fac" id="_ont4port" type="checkbox" class="sev_check">4 Port ONT
                </label>
                <label for="_ont8port" class="checkbox-inline">
                    <input id="s_fac1" id="_ont8port" type="checkbox" class="sev_check">8 Port ONT
                </label>
            </div>
            <br>
            <div id="nos_endpoints" class="form-group has-success" name="field">
                Number of end points estimated:<input class="form-control input-lg"
                                                      placeholder="Number of end points"
                                                      id="_endpoints" value=""
                                                      type="text" required="true" validate>
            </div>
        </div>
    </fieldset>
    <!--https://jqueryvalidation.org/number-method/-->
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
    <script>
        //TODO validate not working
        // just for the demos, avoids form submit
        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        });
        $( "#nos_endpoints" ).validate({
            rules: {
                field: {
                    required: true,
                    number: true
                }
            }
        });
    </script>
    <button class="btn btn-lg btn-primary btn-block" type="button" name="button" value="Validate!"
            onclick="fun_gponcal()">
        Click to Calculate
    </button>
    <table class="table table-striped p-lg-5" cellspacing="0" border="1" id="">
        <tr class="table-basic" id="ont_4p">
            <td style="width:70%">Number of 4 Port ONT</td>
            <td style="width:30%" id="nosont4">0</td>
        </tr>
        <tr class="table-basic" id="ont_8p">
            <td style="width:70%">Number of 8 Port ONT</td>
            <td style="width:30%" id="nosont8">0</td>
        </tr>
        <tr class="table-success" id="ea5801_4p">
            <td style="width:70%">Package A Price (EA5801-GP08)</td>
            <td style="width:30%" id="ea5801G084pkg">0
            </td>
        </tr>
        <tr class="table-success" id="ea5801_8p">
            <td style="width:70%">Package A Price (EA5801-GP08)</td>
            <td style="width:30%" id="ea5801G088pkg">0</td>
        </tr>
        <tr class="table-active" id="ea5800x2_4p">
            <td style="width:70%">
                Package B Price (SmartAX EA5800-X2)
            </td>
            <td style="width:30%" id="ea5800x2_4pkg">0</td>
        </tr>
        <tr class="table-active" id="ea5800x2_8p">
            <td style="width:70%">
                Package B Price (SmartAX EA5800-X2)
            </td>
            <td style="width:30%" id="ea5800x2_8pkg">0</td>
        </tr>
        <tr class="table-info" id="ea5800x7_4p">
            <td style="width:70%">
                Package C Price (SmartAX EA5800-X7)
            </td>
            <td style="width:30%" id="ea5800x7_4pkg">0</td>
        </tr>
        <tr class="table-info" id="ea5800x7_8p">
            <td style="width:70%">
                Package C Price (SmartAX EA5800-X7)
            </td>
            <td style="width:30%" id="ea5800x7_8pkg">0</td>
        </tr>
    </table>
</div>
<script>
    // document.getElementById("s_fac").checked = true;
    $('#s_fac').prop('checked', true);
    $(function () {
        $('.sev_check').click(function (e) {
            $('.sev_check').not(this).prop('checked', false);
        });
    });
</script>
<script>
    $('#ea5800x7_4p').hide();
    $('#ea5800x7_8p').hide();
    $('#ea5800x2_4p').hide();
    $('#ea5800x2_8p').hide();
    $('#ea5801_4p').hide();
    $('#ea5801_8p').hide();
    $('#ont_8p').hide();
    $('#ont_4p').hide();
    // $('#ea5800x7').show();
</script>
</body>
</html>